<template>
	<div class="overlay" @click.self="$emit('close')">
		<div class="modal">
			<div class="header">
				<div class="left">
					<div class="thumb" :style="thumbStyle"></div>
					<div class="titles">
						<h3 class="name">{{ event.city }}</h3>
						<div class="country">{{ event.country }}</div>
					</div>
				</div>
				<button class="close" @click="$emit('close')">✕</button>
			</div>
			<hr class="divider" />
			<div class="body">
				<div class="row"><span class="ico">🗓️</span><span>{{ event.date || '—' }}</span></div>
				<div class="row"><span class="ico">👥</span><span>{{ event.attendees || '—' }}</span></div>
				<div class="row"><span class="ico">⭐</span><span>{{ event.description || '—' }}</span></div>
				<div class="row"><span class="ico">💬</span><span>{{ event.greeting || '—' }}</span></div>
				<div class="badge" :class="event.status === 'upcoming' ? 'upcoming' : 'past'">{{ event.status === 'upcoming' ? 'UPCOMING EVENT' : 'PAST EVENT' }}</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'EventPopup',
	props: { event: { type: Object, required: true } },
	computed: {
		thumbStyle() {
			const url = this.event.image || ''
			if (url) return { backgroundImage: `url(${url})` }
			return { background: 'linear-gradient(135deg,#f7f2ea,#efe7da)' }
		}
	}
}
</script>

<style scoped>
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; z-index: 10000; }
.modal { width: 520px; max-width: 92vw; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 44px rgba(0,0,0,0.22); }
.header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; }
.left { display: flex; align-items: center; gap: 12px; }
.thumb { width: 56px; height: 56px; border-radius: 12px; background-size: cover; background-position: center; }
.titles { display: flex; flex-direction: column; }
.name { margin: 0; font-size: 20px; }
.country { color: #666; font-size: 14px; }
.close { background: #f6f6f6; border: 1px solid #eee; border-radius: 999px; width: 28px; height: 28px; cursor: pointer; }
.divider { margin: 0; border: none; border-top: 1px solid #eee; }
.body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; align-items: center; gap: 8px; color: #333; }
.ico { width: 18px; text-align: center; }
.badge { align-self: flex-start; margin-top: 8px; font-size: 12px; border-radius: 999px; padding: 6px 10px; border: 1px solid #ddd; }
.badge.upcoming { background: #fff3c2; color: #111; border-color: #ffe28a; }
.badge.past { background: #f7efe1; color: #8a6d3b; border-color: #ecd9b8; }
</style>